<script>
import {defineComponent} from 'vue'
import {allData} from "@/utils/data";
import {createIcon, createInfoWindow, getMap} from "@/utils/map";

export default defineComponent({
    name: "gdPackaging",
    data() {
        return {
            data: allData,
            plugins:['AMap.MoveAnimation', 'AMap.MouseTool', 'AMap.GeometryUtil', 'AMap.GeometryUtil.isPointInRing'],
            list:[
                {
                    id:0,
                    name:'公司',
                    flag:false
                },
                {
                    id:1,
                    name:'工地',
                    flag:false
                },
                {
                    id:2,
                    name:'小车',
                    flag:false
                },
                {
                    id:3,
                    name:'储料罐',
                    flag:false
                },
            ]

        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        // async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。
        // 因此对async函数可以直接then，返回值就是then方法传入的函数。
        async initMap() {
            // 传递过来的初始化地图
            const AMap = await getMap(this.plugins)
            //     创造地图实例
            this.map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 11, // 初始化地图级别
                center: [114.53, 36.58], // 初始化地图中心点位置
            });
            this.markers = this.data.map(item=>{

                // 创建新的标记点
                const marker =  createIcon(AMap,item)
                // 创建信息窗体
                createInfoWindow(AMap,item,marker,this.map)
                marker.on('click', () => {
                    createInfoWindow(AMap,item,marker,this.map).open(this.map, marker.getPosition());
                });


                return marker
            })
            this.map.add(this.markers)
        },
        // 图例
        changeFlag(item){
            item.flag=!item.flag
            // this.markers[0].setMap(null)
            var arr=[]
            this.list.map(item=>{
                if (item.flag){
                    arr.push(item.id)
                }
            })
            this.data.map((item,index)=>{
                console.log(index)
                console.log(item)
                if (arr.includes(item.type)){
                    this.markers[index].setMap(null)
                }else{
                    this.markers[index].setMap(this.map)
                }
            })
        }
    }
})
</script>

<template>
<div>
    <div id="container">

    </div>
    <div class="legend">
        <div v-for="item in list" :key="item.id">
            <input type="checkbox" :checked="item.flag" @change="changeFlag(item)">
            {{item.name}}
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
/deep/.legend {
       color: #000;
       position: fixed;
       right: 0;
        top: 0;
       z-index: 999;
}
.btn {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 5;
}

/deep/ #container {
  width: 100%;
  height: 100vh;

  .content-window-card {
    position: relative;
    box-shadow: none;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 0;
  }

  .content-window-card p {
    height: 2rem;
  }

  .custom-info {
    //width: 200px;
    border: solid 1px silver;
  }

  div.info-top {
    width: 513px;
    position: relative;
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #CCC;
    border-radius: 5px 5px 0 0;
  }

  div.info-top div {
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    padding: 0 10px;
  }

  div.info-top img {
    position: absolute;
    top: 10px;
    right: 10px;
    transition-duration: 0.25s;
  }

  div.info-top img:hover {
    box-shadow: 0px 0px 5px #000;
  }

  div.info-middle {
    width: 500px;
    font-size: 12px;
    padding: 10px 6px;
    line-height: 20px;
    overflow: hidden;
  }

  div.info-bottom {
    height: 0px;
    width: 100%;
    clear: both;
    text-align: center;
  }

  div.info-bottom img {
    position: relative;
    z-index: 104;
  }

  span {
    margin-left: 5px;
    font-size: 11px;
  }

  .info-middle img {
    float: left;
    margin-right: 6px;
  }
}

/deep/ .info {
  overflow: hidden;
  margin: 0 10px;
  box-shadow: 0 3px 14px rgba(0, 0, 100, 0.6);
  background-color: #fff;
  padding: 1px;
  border: 1px solid silver;
  border-radius: 5px;
  width: 500px;

}

/deep/.infoBottom {
  position: relative;
  margin-top: 6px;
  text-align: right;
  overflow: hidden;
}

/deep/ #arrow {
  position: absolute;
  top: 46px;
  left: 250px;

  img {
    width: 30px;
    height: 23px;
  }
}

/deep/ .btn {
  float: right;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  border: 1px solid #25a5f7;
  color: #25a5f7;
  line-height: 1.5;
  border-radius: 1rem;
  font-size: 13px;
  padding: 5px 5px;
  margin-bottom: 15px;
  margin-right: 20px;
  background-color: white;
}

/deep/ .infoMain {
  font-size: 13px;
  padding: 15px;
  line-height: 20px;
  width: 500px;
  .type {
    width: 400px;
    color: #930;
    font-weight: 700;
  }

  .type td {
    white-space: nowrap;
    text-align: right;
  }

  .name {
    padding-left: 15px;
    padding-right: 15px;
  }

  .num {
    text-align: left !important;
  }
}

/deep/ .infoHead {
  display: flex;
  justify-content: space-between;
  background-color: #fafafa;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;

  #close {
    cursor: pointer;
    //margin-top: 10px;
  }

  img {
    display: inline-block;
    margin-top: 10px;
    width: 8px;
    height: 8px;
  }

  .card {
    font-size: 14px;
    font-weight: 700;
    color: #16b;
  }
}
</style>